<template>
    <view class="list-card">
        <view v-for="item in dataList" :key="item.id" class="list-item">
            <uv-image :src="item.cover" width="240rpx" height="180rpx" class="list-image" :lazy-load="true"
                :observeLazyLoad="true">
                <template v-slot:error>
                    <view style="font-size: 24rpx;">加载失败</view>
                </template>
            </uv-image>
            <view class="list-info">
                <uv-text :lines="1" class="list-title" :text="item.title"></uv-text>
                <view class="meta">
                    <text>{{ item.area }}㎡</text>
                    <text>{{ item.roomType }}</text>
                    <text>{{ item.district }}</text>
                </view>
                <view class="tags">
                    <view class="tag" v-for="(tag, index) in item.tags" :key="index">{{ tag }}</view>
                </view>
                <view class="price-wrap">
                    <text class="content-price">{{ item.price }}</text>
                    <text class="content-unit">{{ item.unit }}</text>
                    <text class="house-avg-price">{{ item.avgPrice }}</text>
                </view>
            </view>
        </view>
        <view v-if="status === 'loading'">
            <uv-skeletons :loading="true" :animate="true" :skeleton="skeleton"></uv-skeletons>
        </view>
    </view>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import type { IHouseItem } from '@/types/house'

defineOptions({
    name: 'listCard'
})
defineProps({
    dataList: {
        type: Object as PropType<IHouseItem[]>,
        required: true
    },
    status: {
        type: String,
        required: true
    }
})
const skeleton = [{ type: 'flex', num: 3, children: [{ type: 'custom', num: 1, style: 'width:240rpx;height:188rpx;marginRight: 30rpx;' }, { type: 'line', num: 4, style: [null, 'width:360rpx;', 'width:200rpx;'] }] }]
</script>
<style lang="scss" scoped>
.list-card {
    display: flex;
    flex-direction: column;
    gap: 10rpx;

    .list-item {
        background: #fff;
        border-radius: 16rpx;
        display: flex;
        padding: 10rpx 0;

        .list-info {
            flex: 1;
            margin-left: 20rpx;

            .list-title {
                span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                font-size: 28rpx;
                color: #333;
            }

            .meta {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #999;

                text {
                    margin-right: 15rpx;
                }
            }

            .tags {
                .tag {
                    box-sizing: border-box;
                    display: -webkit-inline-box;
                    display: inline-flex;
                    background-color: #f3f5fb;
                    border-radius: 4rpx;
                    font-size: 24rpx;
                    line-height: 16rpx;
                    color: #667D91;
                    padding: 0 8rpx;
                    margin-right: 10rpx;
                    height: 32rpx;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    flex-direction: row;
                    -webkit-box-align: center;
                    align-items: center;
                }
            }

            .price-wrap {
                margin-top: 5px;
                font-size: 12px;
                color: #0b0f12;
                position: relative;

                .content-price {
                    font-size: 19px;
                    font-family: Fang-din-SemiBold;
                    font-weight: 900;
                    color: #fd4d39;
                    vertical-align: -1px;
                }
            }

            .content-unit {
                font-family: PingFangSC-Medium;
                font-weight: 500;
                color: #fd4d39;
            }

            .house-avg-price {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                font-weight: 400;
                color: #979b9e;
                margin-left: 8px;
            }
        }
    }
}
</style>